<template>
  <view class="distribution-container">

    <!-- 滚动内容区域 -->
    <scroll-view class="scroll-content" scroll-y>
      <!-- 收益概览区域 -->
      <view class="earnings-overview">
        <view class="earnings-header">
          <view class="earnings-main">
            <text class="earnings-label">可提现收益</text>
            <text class="earnings-amount">¥{{ earningsInfo.canWithdrawal }}</text>
            <!--            <text class="earnings-note">累计收益 ¥{{ earningsInfo.totalIncome }}</text>-->
          </view>
          <view class="earnings-actions">
            <view class="action-btn withdraw-btn" @click="withdrawMoney">
              <text class="btn-text">提现</text>
            </view>
          </view>
        </view>

        <!-- 收益统计 -->
        <view class="earnings-stats">
          <view class="stat-item">
            <text class="stat-value">¥{{ earningsInfo.todayIncome }}</text>
            <text class="stat-label">今日收益</text>
          </view>
          <view class="stat-divider"></view>
          <view class="stat-item">
            <text class="stat-value">¥{{ earningsInfo.monthIncome }}</text>
            <text class="stat-label">本月收益</text>
          </view>
          <view class="stat-divider"></view>
          <view class="stat-item">
            <text class="stat-value">¥{{ earningsInfo.totalIncome }}</text>
            <text class="stat-label">累计收益</text>
          </view>
        </view>
      </view>

      <!-- 银行卡管理区域 -->
      <view class="bank-card-section">
        <view class="section-header">
          <text class="section-title">银行卡管理</text>
          <view class="section-action" @click="manageBankCard">
            <text class="action-text">{{ hasBankCard ? '管理' : '绑定' }}</text>
            <u-icon name="arrow-right" size="24" color="#909399"></u-icon>
          </view>
        </view>

        <!-- 已绑定银行卡 -->
        <view class="bank-card" v-if="hasBankCard">
          <view class="card-info">
            <image class="bank-logo"
                   src="https://file.casugn.com/storecompcard/temp/yhk_1757656786574.png"
                   mode="aspectFit"></image>
            <view class="card-details">
              <text class="bank-name">{{ bankCardInfo.bankName }}</text>
              <text class="card-number" v-if="bankCardInfo.bankCardNo">**** **** **** {{
                  bankCardInfo.bankCardNo.slice(-4)
                }}
              </text>
            </view>
          </view>
          <view class="card-status">
            <text class="status-text">已绑定</text>
          </view>
        </view>

        <!-- 未绑定银行卡 -->
        <view class="no-bank-card" v-else>
          <view class="no-card-icon">
            <image mode="aspectFill"
                   src="https://file.casugn.com/storecompcard/temp/yhk_1757656786574.png"></image>
          </view>
          <text class="no-card-text">请先绑定银行卡</text>
          <text class="no-card-desc">绑定后可进行提现操作</text>
        </view>
      </view>

      <!-- 功能菜单区域 -->
      <view class="menu-section">
        <view class="menu-list">
          <view class="menu-item" @click="goToPage('/pagesMall/myShop/withdrawalRecord')">
            <view class="menu-left">
              <view class="menu-icon withdraw-icon">
                <u-icon name="red-packet" size="40" color="#10c469"></u-icon>
              </view>
              <text class="menu-title">提现记录</text>
            </view>
            <view class="menu-right">
              <text class="menu-count" v-if="withdrawRecordCount > 0">{{
                  withdrawRecordCount
                }}
              </text>
              <u-icon name="arrow-right" size="28" color="#c0c4cc"></u-icon>
            </view>
          </view>

          <!--          <view class="menu-item" @click="goToPage('/pagesMall/distribution/earningsDetail')">-->
          <!--            <view class="menu-left">-->
          <!--              <view class="menu-icon earnings-icon">-->
          <!--                <u-icon name="order" size="40" color="#4182bb"></u-icon>-->
          <!--              </view>-->
          <!--              <text class="menu-title">收益明细</text>-->
          <!--            </view>-->
          <!--            <view class="menu-right">-->
          <!--              <u-icon name="arrow-right" size="28" color="#c0c4cc"></u-icon>-->
          <!--            </view>-->
          <!--          </view>-->
        </view>
      </view>

      <!-- 底部安全区域 -->
      <view class="safe-area-bottom"></view>
    </scroll-view>

    <!-- 绑定银行卡弹出层 -->
    <u-popup
        :show="showBindCardPopup"
        mode="bottom"
        height="70%"
        border-radius="20"
        closeable
        @close="closeBindCardPopup"
    >
      <view class="bind-card-popup">
        <view class="popup-header">
          <text class="popup-title">{{ isEditMode ? '编辑银行卡' : '绑定银行卡' }}</text>
          <text class="popup-subtitle">请填写正确的银行卡信息</text>
        </view>

        <u--form
            ref="bindCardForm"
            :model="bindCardForm"
            :rules="bindCardRules"
            label-width="140"
            label-position="left"
        >
          <u-form-item
              label="银行卡号"
              prop="bankCardNo"
              required
              border-bottom
          >
            <u--input
                v-model="bindCardForm.bankCardNo"
                placeholder="请输入银行卡号"
                type="number"
                maxlength="19"
                @input="formatCardNumber"
            />
          </u-form-item>

          <u-form-item
              label="银行名称"
              prop="bankName"
              required
              border-bottom
          >
            <u--input
                v-model="bindCardForm.bankName"
                placeholder="请输入银行名称"
                maxlength="50"
            />
          </u-form-item>

          <u-form-item
              label="持卡人"
              prop="cardHolder"
              required
              border-bottom
          >
            <u--input
                v-model="bindCardForm.cardHolder"
                placeholder="请输入持卡人姓名"
                maxlength="20"
            />
          </u-form-item>

          <u-form-item
              label="备注"
              prop="note"
              border-bottom
          >
            <u--input
                v-model="bindCardForm.note"
                placeholder="请输入备注信息（选填）"
                type="textarea"
                :auto-height="true"
                maxlength="200"
            />
          </u-form-item>
        </u--form>

        <view class="popup-actions">
          <u-button
              type="info"
              :plain="true"
              size="large"
              @click="closeBindCardPopup"
          >
            取消
          </u-button>
          <u-button
              type="primary"
              size="large"
              :loading="submitting"
              @click="submitBindCard"
          >
            {{ submitting ? '提交中...' : (isEditMode ? '确认更新' : '确认绑定') }}
          </u-button>
        </view>
      </view>
    </u-popup>

    <!-- 提现选择订单弹出层 -->
    <u-popup
        :show="showWithdrawOrderPopup"
        mode="bottom"
        height="80%"
        border-radius="20"
        closeable
        @close="closeWithdrawOrderPopup"
    >
      <view class="withdraw-order-popup">
        <view class="popup-header">
          <text class="popup-title">选择提现订单</text>
        </view>

        <!-- 统计信息 -->
        <view class="withdraw-summary">
          <view class="summary-item">
            <text class="summary-label">已选订单：</text>
            <text class="summary-value">{{ selectedOrders.length }} / {{
                shopEarningsList.length
              }}
            </text>
          </view>
          <view class="summary-item">
            <text class="summary-label">提现金额：</text>
            <text class="summary-value amount">¥{{ calculateTotalAmount() }}</text>
          </view>
        </view>

        <!-- 全选操作 -->
        <view class="select-all-bar">
          <view class="select-all-item" @click="toggleSelectAll">
            <!--            <u-checkbox-->
            <!--                :value="isAllSelected"-->
            <!--                :disabled="false"-->
            <!--                active-color="#4a90e2"-->
            <!--            ></u-checkbox>-->
            <image class="select-icon" :src="isAllSelected ?
            'https://file.casugn.com/storecompcard/temp/xz_1758675484914.png' : 'https://file.casugn.com/storecompcard/temp/wxz_1758675530862.png'"></image>
            <text class="select-all-text">全选</text>
          </view>
        </view>

        <!-- 订单列表 -->
        <scroll-view class="order-list" scroll-y>
          <view
              class="order-item"
              v-for="(item, index) in shopEarningsList"
              :key="index"
              @click="toggleOrderSelection(item)"
          >
            <view class="order-checkbox">
              <!--              {{ isOrderSelected(item.id) }} {{ item.id }}-->
              <!--              <u-checkbox-->
              <!--                  :value="isOrderSelected(item.id)"-->
              <!--                  :disabled="false"-->
              <!--                  active-color="#4a90e2"-->
              <!--              ></u-checkbox>-->
              <image class="select-icon" :src="isOrderSelected(item.id) ?
            'https://file.casugn.com/storecompcard/temp/xz_1758675484914.png' : 'https://file.casugn.com/storecompcard/temp/wxz_1758675530862.png'"></image>

            </view>

            <view class="order-content">
              <!-- 第一行：分销比例和实付金额 -->
              <view class="order-header">
                <view class="rebate-info">
                  <text class="rebate-label">分销比例：</text>
                  <text class="rebate-value">{{ (item.rebate * 100).toFixed(2) }}%</text>
                </view>
                <text class="actual-total">¥{{ formatAmount(item.actualTotal) }}</text>
              </view>

              <!-- 第二行：时间和可提现金额 -->
              <view class="order-footer">
                <text class="create-time">{{ formatTime(item.createTime) }}</text>
                <view class="withdrawal-amount">
                  <text class="withdrawal-label">可提现：</text>
                  <text class="withdrawal-value">¥{{ formatAmount(item.withdrawalAmount) }}</text>
                </view>
              </view>
            </view>
          </view>

          <!-- 空状态 -->
          <view class="empty-orders" v-if="shopEarningsList.length === 0">
            <text class="empty-text">暂无可提现订单</text>
          </view>
        </scroll-view>

        <!-- 提现按钮 -->
        <view class="withdraw-actions">
          <u-button
              type="info"
              :plain="true"
              size="large"
              @click="closeWithdrawOrderPopup"
          >
            取消
          </u-button>
          <u-button
              type="primary"
              size="large"
              :loading="submittingWithdraw"
              :disabled="selectedOrders.length === 0"
              @click="submitWithdrawOrder"
          >
            {{ submittingWithdraw ? '提现中...' : `提现 ¥${calculateTotalAmount()}` }}
          </u-button>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
import {mapGetters} from 'vuex'

export default {
  data() {
    return {
      statusBarHeight: 0,
      hasBankCard: true, // 是否已绑定银行卡
      withdrawRecordCount: 15, // 提现记录数量
      earningsInfo: {},
      shopId: "",//店铺id
      cardId: "",//店铺的cardId
      bankCardInfo: {
        bankName: '',
        bankLogo: '',
        cardNumber: ''
      },
      shopEarningsList: [],//可以提现的订单
      // 绑定银行卡弹出层
      showBindCardPopup: false,
      submitting: false,
      // 提现订单选择弹出层
      showWithdrawOrderPopup: false,
      submittingWithdraw: false,
      selectedOrders: [], // 选中的订单ID列表
      // 绑定银行卡表单
      bindCardForm: {
        id: '', // 编辑时的银行卡ID
        bankCardNo: '',
        bankName: '',
        cardHolder: '',
        note: '',
        shopId: '',
        userId: ''
      },
      // 是否为编辑模式
      isEditMode: false,
      // 表单验证规则
      bindCardRules: {
        bankCardNo: [
          {
            required: true,
            message: '请输入银行卡号',
            trigger: 'blur'
          },
          {
            min: 16,
            max: 19,
            message: '银行卡号长度应为16-19位',
            trigger: 'blur'
          },
          {
            pattern: /^\d{16,19}$/,
            message: '银行卡号只能包含数字',
            trigger: 'blur'
          }
        ],
        bankName: [
          {
            required: true,
            message: '请输入银行名称',
            trigger: 'blur'
          },
          {
            min: 2,
            max: 50,
            message: '银行名称长度应为2-50个字符',
            trigger: 'blur'
          }
        ],
        cardHolder: [
          {
            required: true,
            message: '请输入持卡人姓名',
            trigger: 'blur'
          },
          {
            min: 2,
            max: 20,
            message: '持卡人姓名长度应为2-20个字符',
            trigger: 'blur'
          },
          {
            pattern: /^[\u4e00-\u9fa5a-zA-Z\s]+$/,
            message: '持卡人姓名只能包含中文、英文和空格',
            trigger: 'blur'
          }
        ],
        note: [
          {
            max: 200,
            message: '备注长度不能超过200个字符',
            trigger: 'blur'
          }
        ]
      }
    }
  },
  computed: {
    ...mapGetters(['userInfo']),

    // 是否全选
    isAllSelected() {
      return this.shopEarningsList.length > 0 &&
          this.selectedOrders.length === this.shopEarningsList.length
    }
  },
  onLoad(option) {
    this.shopId = option.shopId || ''
    this.cardId = option.cardId || ''
    this.getSystemInfo()
    this.loadDistributionData()
    //   获取绑定的银行卡
    this._getShopProdByCardId()
  },
  onShow() {
    //   查询基本提现信息
    this._getShopWithdrawalInfo()
  },

  methods: {
    // 查询基本信息
    _getShopWithdrawalInfo() {
      let params = {
        cardId: this.userInfo.id
      }
      this.$api.getShopWithdrawalInfo(params).then(res => {
        if (res.success) {
          this.earningsInfo = res.result
          this.withdrawRecordCount = res.result.withdrawalRecord || 0
          console.log('基本信息', res.result)
        }
      })
    },
    // 获取系统信息
    getSystemInfo() {
      const systemInfo = uni.getSystemInfoSync()
      this.statusBarHeight = systemInfo.statusBarHeight || 0
    },

    // 加载分销数据
    loadDistributionData() {
      // 这里可以调用API获取分销相关数据
      console.log('加载分销数据')
    },
    // 获取绑定的银行卡列表
    _getShopProdByCardId() {
      let params = {
        userId: this.userInfo.id
      }
      this.$api.getShopProdByCardId(params).then(res => {
        if (res.success) {
          if (res.result && res.result.records.length > 0) {
            this.bankCardInfo = res.result.records[0];
            this.hasBankCard = true;
          } else {
            this.bankCardInfo = {}
            this.hasBankCard = false;
          }
        } else {
          this.hasBankCard = false;
        }
      })
    },

    // 返回上一页
    goBack() {
      uni.navigateBack()
    },

    // 提现操作
    withdrawMoney() {
      if (!this.hasBankCard) {
        uni.showModal({
          title: '提示',
          content: '请先绑定银行卡',
          showCancel: false,
          confirmText: '去绑定',
          success: (res) => {
            if (res.confirm) {
              this.manageBankCard()
            }
          }
        })
        return
      }
      // 提现获取收益列表
      this._getShopEarningsList()

      // uni.showModal({
      //   title: '提现确认',
      //   content: `确定要提现 ¥${this.earningsInfo.canWithdrawal} 吗？`,
      //   success: (res) => {
      //     if (res.confirm) {
      //       this.processWithdraw()
      //     }
      //   }
      // })
    },
    _getShopEarningsList() {
      let params = {
        userId: this.userInfo.id,
        status: 1,//查询可以提现的
        pageNo: 1,
        pageSize: 1000
      }
      this.$api.getShopEarningsList(params).then(res => {
        if (res.success) {
          this.shopEarningsList = res.result.records || []

          if (this.shopEarningsList.length > 0) {
            // 使用 $nextTick 确保 DOM 更新后再设置状态
            this.$nextTick(() => {
              // 默认全选所有订单
              this.selectedOrders = this.shopEarningsList.map(item => item.id)
            })
            // 显示选择订单弹出层
            this.showWithdrawOrderPopup = true
          } else {
            uni.showToast({
              title: '暂无可提现订单',
              icon: 'none'
            })
          }
        }
      })
    },
    // 处理提现
    processWithdraw() {
      uni.showLoading({title: '处理中...'})
      // 模拟提现处理
      setTimeout(() => {
        uni.hideLoading()
        uni.showToast({
          title: '提现申请已提交',
          icon: 'success'
        })
        // 刷新数据
        this.loadDistributionData()
      }, 2000)
    },

    // 银行卡管理
    manageBankCard() {
      console.log('银行卡管理')
      uni.showActionSheet({
        itemList: this.hasBankCard ? ['查看银行卡', '更换银行卡', '解绑银行卡'] : ['绑定银行卡'],
        success: (res) => {
          if (this.hasBankCard) {
            switch (res.tapIndex) {
              case 0:
                this.viewBankCard()
                break
              case 1:
                this.changeBankCard()
                break
              case 2:
                this.unbindBankCard()
                break
            }
          } else {
            if (res.tapIndex === 0) {
              this.bindBankCard()
            }
          }
        }
      })
    },

    // 查看银行卡
    viewBankCard() {
      uni.showModal({
        title: '银行卡信息',
        content: `${this.bankCardInfo.bankName}\n卡号：${this.bankCardInfo.bankCardNo}`,
        showCancel: false
      })
    },

    // 绑定银行卡
    bindBankCard() {
      console.log('绑定银行卡')
      // 初始化表单数据
      this.resetBindCardForm()
      // 显示弹出层
      this.showBindCardPopup = true
    },

    // 更换银行卡
    changeBankCard() {
      console.log('更换银行卡')
      // 填充现有银行卡数据到表单
      this.fillBankCardForm()
      // 设置为编辑模式
      this.isEditMode = true
      // 显示弹出层
      this.showBindCardPopup = true
    },

    // 解绑银行卡
    unbindBankCard() {
      let that = this
      uni.showModal({
        title: '确认解绑',
        content: '解绑后将无法进行提现操作，确定要解绑银行卡吗？',
        success: (res) => {
          if (res.confirm) {
            that.hasBankCard = false
            that.$api.delShopAccount(that.bankCardInfo.id).then(res => {
              if (res.success) {
                uni.showToast({
                  title: '解绑成功',
                  icon: 'success'
                })
                that._getShopProdByCardId()
              }
            })

          }
        }
      })
    },

    // 页面跳转
    goToPage(url) {
      console.log('跳转到:', url, this.cardId)
      // uni.showToast({
      //   title: '功能开发中',
      //   icon: 'none'
      // })
      uni.navigateTo({
        url: `${url}?shopId=${this.shopId}&cardId=${this.userInfo.id}`
      })
    },

    // 重置绑定银行卡表单
    resetBindCardForm() {
      this.bindCardForm = {
        id: '',
        bankCardNo: '',
        bankName: '',
        cardHolder: '',
        note: '',
        shopId: this.shopId,
        userId: this.userInfo.id
      }
      this.isEditMode = false
    },

    // 关闭绑定银行卡弹出层
    closeBindCardPopup() {
      this.showBindCardPopup = false
      this.resetBindCardForm()
    },

    // 填充银行卡表单数据（编辑模式）
    fillBankCardForm() {
      if (this.bankCardInfo && this.bankCardInfo.id) {
        this.bindCardForm = {
          id: this.bankCardInfo.id,
          bankCardNo: this.bankCardInfo.bankCardNo || '',
          bankName: this.bankCardInfo.bankName || '',
          cardHolder: this.bankCardInfo.cardHolder || '',
          note: this.bankCardInfo.note || '',
          shopId: this.shopId,
          userId: this.userInfo.id
        }
      }
    },

    // 格式化银行卡号输入
    formatCardNumber(value) {
      // 移除所有非数字字符
      const cleanValue = value.replace(/\D/g, '')
      // 限制最大长度为19位
      this.bindCardForm.bankCardNo = cleanValue.substring(0, 19)
    },

    // 提交绑定银行卡
    async submitBindCard() {
      try {
        // 表单验证
        const isValid = await this.$refs.bindCardForm.validate()
        if (!isValid) {
          return
        }

        this.submitting = true

        // 准备提交数据
        const submitData = {
          bankCardNo: this.bindCardForm.bankCardNo,
          bankName: this.bindCardForm.bankName,
          cardHolder: this.bindCardForm.cardHolder,
          note: this.bindCardForm.note,
          shopId: this.shopId,
          userId: this.userInfo.id
        }

        // 如果是编辑模式，添加ID
        if (this.isEditMode && this.bindCardForm.id) {
          submitData.id = this.bindCardForm.id
        }

        console.log('提交银行卡数据:', submitData, '编辑模式:', this.isEditMode)

        // 根据模式调用不同的API
        const res = this.isEditMode
            ? await this.$api.editShopAccount(submitData)
            : await this.$api.addShopAccount(submitData)

        if (res.success) {
          uni.showToast({
            title: this.isEditMode ? '更新成功' : '绑定成功',
            icon: 'success'
          })

          // 关闭弹出层
          this.closeBindCardPopup()

          // 重新获取银行卡信息
          this._getShopProdByCardId()

        } else {
          uni.showToast({
            title: res.message || (this.isEditMode ? '更新失败' : '绑定失败'),
            icon: 'none'
          })
        }

      } catch (error) {
        console.error('操作银行卡失败:', error)
        uni.showToast({
          title: this.isEditMode ? '更新失败，请重试' : '绑定失败，请重试',
          icon: 'none'
        })
      } finally {
        this.submitting = false
      }
    },

    // 关闭提现订单选择弹出层
    closeWithdrawOrderPopup() {
      this.showWithdrawOrderPopup = false
      this.selectedOrders = []
      this.shopEarningsList = []
    },

    // 切换订单选择状态
    toggleOrderSelection(order) {
      const index = this.selectedOrders.indexOf(order.id)
      if (index > -1) {
        // 如果已选中，则取消选择
        this.selectedOrders.splice(index, 1)
      } else {
        // 如果未选中，则添加选择
        this.selectedOrders.push(order.id)
      }
    },

    // 切换全选状态
    toggleSelectAll() {
      if (this.isAllSelected) {
        // 当前为全选状态，切换为全不选
        this.selectedOrders = []
      } else {
        // 当前为非全选状态，切换为全选
        this.selectedOrders = this.shopEarningsList.map(item => item.id)
      }
    },

    // 判断订单是否被选中
    isOrderSelected(orderId) {
      console.log('this.selectedOrders', this.selectedOrders)
      return this.selectedOrders.includes(orderId)
    },

    // 计算选中订单的总金额
    calculateTotalAmount() {
      if (this.selectedOrders.length === 0) return '0.00'

      const total = this.shopEarningsList
          .filter(item => this.selectedOrders.includes(item.id))
          .reduce((sum, item) => sum + (parseFloat(item.withdrawalAmount) || 0), 0)

      return total.toFixed(2)
    },

    // 提交提现申请
    async submitWithdrawOrder() {
      if (this.selectedOrders.length === 0) {
        uni.showToast({
          title: '请选择要提现的订单',
          icon: 'none'
        })
        return
      }

      // 检查是否绑定银行卡
      if (!this.hasBankCard || !this.bankCardInfo.id) {
        uni.showToast({
          title: '请先绑定银行卡',
          icon: 'none'
        })
        return
      }

      try {
        this.submittingWithdraw = true

        // 准备提交数据
        const submitData = {
          earningsIds: this.selectedOrders.join(','), // 用逗号分割的订单ID字符串
          amount: parseFloat(this.calculateTotalAmount()), // 提现总金额
          bankCardNo: this.bankCardInfo.bankCardNo,
          bankName: this.bankCardInfo.bankName,
          cardHolder: this.bankCardInfo.cardHolder,
          shopId: this.shopId,
          userId: this.userInfo.id
        }

        console.log('提交提现申请:', submitData)

        // 调用提现申请接口
        const res = await this.$api.addShopWithdrawals(submitData)

        if (res.success) {
          uni.showToast({
            title: '提现申请已提交',
            icon: 'success'
          })

          // 关闭弹出层
          this.closeWithdrawOrderPopup()

          // 刷新数据
          this._getShopWithdrawalInfo()

        } else {
          uni.showToast({
            title: res.message || '提现申请失败',
            icon: 'none'
          })
        }

      } catch (error) {
        console.error('提现申请失败:', error)
        uni.showToast({
          title: '提现申请失败，请重试',
          icon: 'none'
        })
      } finally {
        this.submittingWithdraw = false
      }
    },

    // 格式化金额
    formatAmount(amount) {
      if (amount === null || amount === undefined || amount === '') return '0.00'
      const num = Number(amount)
      if (Number.isNaN(num)) return '0.00'
      return num.toFixed(2)
    },

    // 格式化时间
    formatTime(timeStr) {
      if (!timeStr) return '-'
      try {
        // 如果是日期格式 "2025-09-23"，直接返回
        if (timeStr.includes('-') && timeStr.length === 10) {
          return timeStr
        }
        // 其他格式尝试解析
        const date = new Date(timeStr)
        if (isNaN(date.getTime())) {
          return timeStr
        }
        const year = date.getFullYear()
        const month = String(date.getMonth() + 1).padStart(2, '0')
        const day = String(date.getDate()).padStart(2, '0')
        return `${year}-${month}-${day}`
      } catch (error) {
        console.error('时间格式化错误:', error)
        return timeStr
      }
    }
  }
}
</script>

<style lang="scss" scoped>
/* 页面主容器 */
.distribution-container {
  //min-height: 100vh;
  //background: linear-gradient(180deg, #4182bb 0%, #5a96d4 100%);
}

.scroll-content {
  height: calc(100vh - 29rpx);
  background-color: #f5f7fa;
}

.earnings-overview {
  background: linear-gradient(135deg, #4a90e2 0%, #5ba0f2 100%);
  padding: 40rpx 30rpx 60rpx;
  position: relative;

  &::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 40rpx;
    background-color: #f5f7fa;
    border-radius: 40rpx 40rpx 0 0;
  }
}

.earnings-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 50rpx;
}

.earnings-main {
  flex: 1;
}

.earnings-label {
  display: block;
  font-size: 28rpx;
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 15rpx;
}

.earnings-amount {
  display: block;
  font-size: 64rpx;
  font-weight: 600;
  color: #fff;
  margin-bottom: 10rpx;
}

.earnings-note {
  display: block;
  font-size: 24rpx;
  color: rgba(255, 255, 255, 0.6);
}

.earnings-actions {
  display: flex;
  align-items: center;
}

.action-btn {
  padding: 20rpx 40rpx;
  border-radius: 50rpx;
  transition: all 0.3s ease;

  &.withdraw-btn {
    background-color: rgba(255, 255, 255, 0.2);
    border: 2rpx solid rgba(255, 255, 255, 0.3);

    &:active {
      background-color: rgba(255, 255, 255, 0.3);
      transform: scale(0.95);
    }
  }
}

.btn-text {
  font-size: 28rpx;
  font-weight: 500;
  color: #fff;
}

.earnings-stats {
  display: flex;
  align-items: center;
  justify-content: space-around;
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 20rpx;
  padding: 40rpx 20rpx;
  backdrop-filter: blur(10rpx);
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
}

.stat-value {
  font-size: 32rpx;
  font-weight: 600;
  color: #fff;
  margin-bottom: 10rpx;
}

.stat-label {
  font-size: 24rpx;
  color: rgba(255, 255, 255, 0.7);
}

.stat-divider {
  width: 2rpx;
  height: 60rpx;
  background-color: rgba(255, 255, 255, 0.2);
}

.bank-card-section {
  margin: 30rpx;
  background-color: #fff;
  border-radius: 20rpx;
  padding: 30rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
}

.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 30rpx;
}

.section-title {
  font-size: 32rpx;
  font-weight: 600;
  color: #303133;
}

.section-action {
  display: flex;
  align-items: center;
  gap: 10rpx;
}

.action-text {
  font-size: 26rpx;
  color: #4182bb;
}

.bank-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 30rpx;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 16rpx;
  color: #fff;
}

.card-info {
  display: flex;
  align-items: center;
  flex: 1;
}

.bank-logo {
  width: 60rpx;
  height: 60rpx;
  border-radius: 10rpx;
  background-color: #fff;
  margin-right: 20rpx;
}

.card-details {
  display: flex;
  flex-direction: column;
}

.bank-name {
  font-size: 28rpx;
  font-weight: 500;
  margin-bottom: 8rpx;
}

.card-number {
  font-size: 24rpx;
  opacity: 0.8;
}

.card-status {
  display: flex;
  align-items: center;
}

.status-text {
  font-size: 24rpx;
  color: rgba(255, 255, 255, 0.8);
}

.no-bank-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 60rpx 20rpx;
}

.no-card-icon {
  margin-bottom: 20rpx;

  image {
    width: 60rpx;
    height: 60rpx;
  }
}

.no-card-text {
  font-size: 28rpx;
  color: #303133;
  margin-bottom: 10rpx;
}

.no-card-desc {
  font-size: 24rpx;
  color: #909399;
}

.menu-section {
  margin: 0 30rpx 30rpx;
}

.menu-list {
  background-color: #fff;
  border-radius: 20rpx;
  overflow: hidden;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.06);
}

.menu-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 40rpx;
  border-bottom: 2rpx solid #f5f7fa;
  transition: all 0.3s ease;

  &:last-child {
    border-bottom: none;
  }

  &:active {
    background-color: #f8f9fa;
  }
}

.menu-left {
  display: flex;
  align-items: center;
  flex: 1;
}

.menu-icon {
  width: 80rpx;
  height: 80rpx;
  border-radius: 20rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 30rpx;

  &.withdraw-icon {
    background-color: rgba(16, 196, 105, 0.1);
  }

  &.earnings-icon {
    background-color: rgba(65, 130, 187, 0.1);
  }

  &.invite-icon {
    background-color: rgba(255, 107, 53, 0.1);
  }

  &.rule-icon {
    background-color: rgba(144, 147, 153, 0.1);
  }
}

.menu-title {
  font-size: 32rpx;
  font-weight: 500;
  color: #303133;
}

.menu-right {
  display: flex;
  align-items: center;
  gap: 15rpx;
}

.menu-count {
  font-size: 24rpx;
  color: #909399;
  background-color: #f5f7fa;
  padding: 6rpx 12rpx;
  border-radius: 12rpx;
  min-width: 40rpx;
  text-align: center;
}

.safe-area-bottom {
  height: calc(env(safe-area-inset-bottom) + 40rpx);
}

/* 绑定银行卡弹出层样式 */
.bind-card-popup {
  background-color: #fff;
  padding: 40rpx;
}

.popup-header {
  text-align: center;
  margin-bottom: 60rpx;
  padding-bottom: 30rpx;
  border-bottom: 2rpx solid #f5f7fa;
}

.popup-title {
  display: block;
  font-size: 36rpx;
  font-weight: 600;
  color: #303133;
  margin-bottom: 12rpx;
}

.popup-subtitle {
  display: block;
  font-size: 26rpx;
  color: #909399;
  line-height: 1.5;
}

.popup-actions {
  display: flex;
  gap: 30rpx;
  margin-top: 60rpx;
  padding-top: 40rpx;
  border-top: 2rpx solid #f5f7fa;
}

.popup-actions .u-button {
  flex: 1;
}

/* 提现订单选择弹出层样式 */
.withdraw-order-popup {
  background-color: #fff;
  padding: 30rpx;
  display: flex;
  flex-direction: column;
  height: 66vh;
}

.withdraw-summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24rpx;
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  border-radius: 16rpx;
  margin-bottom: 30rpx;
}

.summary-item {
  display: flex;
  align-items: center;
  gap: 8rpx;
}

.summary-label {
  font-size: 26rpx;
  color: #606266;
}

.summary-value {
  font-size: 26rpx;
  color: #303133;
  font-weight: 600;

  &.amount {
    color: #4a90e2;
    font-size: 28rpx;
  }
}

.select-all-bar {
  padding: 20rpx;
  border-bottom: 2rpx solid #f5f7fa;
  margin-bottom: 20rpx;
}

.select-all-item {
  display: flex;
  align-items: center;
  gap: 16rpx;
}

.select-icon {
  width: 27rpx;
  height: 27rpx;
}

.select-all-text {
  font-size: 28rpx;
  color: #303133;
  font-weight: 500;
}

.order-list {
  //flex: 1;
  height: 490rpx;
  padding: 0 10rpx;
}

.order-item {
  display: flex;
  align-items: flex-start;
  padding: 24rpx;
  background-color: #fff;
  border-radius: 16rpx;
  margin-bottom: 16rpx;
  border: 2rpx solid #f5f7fa;
  transition: all 0.3s ease;

  &:active {
    background-color: #f8f9fa;
    border-color: #4a90e2;
    transform: scale(0.98);
  }
}

.order-checkbox {
  margin-right: 20rpx;
  padding-top: 4rpx;
}

.order-content {
  flex: 1;
}

.order-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16rpx;
}

.rebate-info {
  display: flex;
  align-items: center;
  gap: 8rpx;
}

.rebate-label {
  font-size: 24rpx;
  color: #909399;
}

.rebate-value {
  font-size: 24rpx;
  color: #4a90e2;
  font-weight: 600;
  background-color: rgba(74, 144, 226, 0.1);
  padding: 4rpx 8rpx;
  border-radius: 8rpx;
}

.actual-total {
  font-size: 30rpx;
  font-weight: 700;
  color: #303133;
}

.order-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.create-time {
  font-size: 24rpx;
  color: #909399;
}

.withdrawal-amount {
  display: flex;
  align-items: center;
  gap: 8rpx;
}

.withdrawal-label {
  font-size: 24rpx;
  color: #606266;
}

.withdrawal-value {
  font-size: 26rpx;
  color: #19be6b;
  font-weight: 600;
}

.empty-orders {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 80rpx 20rpx;
}

.empty-text {
  font-size: 28rpx;
  color: #909399;
}

.withdraw-actions {
  display: flex;
  gap: 30rpx;
  margin-top: 30rpx;
  padding-top: 30rpx;
  border-top: 2rpx solid #f5f7fa;
}
</style>
